<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>			
		<title></title>
	</head>
	<body>
		<div id="app">
			<div style="height: 450px; width: 20%; margin-left: 40%; margin-top: 150px; background-color: aquamarine;">
			    <Card style="width:100%; height: 100%;">
					<div style="text-align:center">
						<img src="../img/logo.PNG" style="height: 30%; width: 100%;">
						<div>
							<i-form ref="formInline" :model="formInline" :rules="ruleInline" inline>
								<form-item prop="user"><!--确定使用哪一种规则-->
									<i-input type="text" size="large" v-model="formInline.user" placeholder="请输入账号">
										<icon type="ios-person-outline" slot="prepend"></icon>
									</i-input>
								</form-item>
								<form-item prop="nickname">
									<i-input type="text" size="large" v-model="formInline.nickname" placeholder="请输入昵称">
										<icon type="ios-person-outline" slot="prepend"></icon>
									</i-input>
								</form-item>						        
								<form-item prop="password">
									<i-input type="password" size="large" v-model="formInline.password" placeholder="请输入密码">
										<icon type="ios-lock" slot="prepend"></icon>
									</i-input>
								</form-item>
								<form-item prop="passwdCheck">
									<i-input type="password" size="large" v-model="formInline.passwdCheck" placeholder="请再次输入密码">
										<icon type="ios-lock-outline" slot="prepend"></icon>
									</i-input>
								</form-item>
								<form-item>
									<i-button type="primary" @click="handleSubmit('formInline')" style="margin-left: 10px;">注册</i-button>
									<i-button type="dashed" >登录</i-button>
								</form-item>
							</i-form>			            	
						</div>
			        </div>
			    </Card>				
			</div>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data() {
				const validtePass = (rule, value, callback) => {
					if (value == '') {
						callback(new Error("请输入你的密码"));
					} else {
						if (this.formInline.passwdCheck !=='') {
							this.$refs.formInline.validateField('passwdCheck');
						}
					}
					callback();
				};
				const validatePassCheck = (rule, value, callback) => {
					if (value === '') {
						callback(new Error('请再次填写您的密码'));
					} else if (value !== this.formInline.password) {
						callback(new Error('两次密码不匹配'));
					} else {
						callback();
					}
				};
				
				return {
					formInline: {
						user: '',
						nickname: '',
						password: '',
						passwdCheck: ''
						
					},
					ruleInline: {
						user: [
							{required: true,  message: '请填写账号', trigger: 'blur'}
						],
						nickname: [
							{required: true,  message: '请填写昵称', trigger: 'blur'}
						],
						password: [
			               { required: true, message: '请填写密码', trigger: 'blur' },
	                        { validator: validtePass, trigger: 'blur'},
	                        { type: 'string', min: 6, message: '秘密字符数不能小于6', trigger: 'blur' }				
						],
						passwdCheck: [
		                    { required: true, message: '请再次填写您的密码', trigger: 'blur' },
	                        { validator: validatePassCheck, trigger: 'blur'},
	                        { type: 'string', min: 6, message: '秘密字符数不能小于6', trigger: 'blur' }					
						]
					}
				}
			},
			methods: {
				handleSubmit (name) {
					this.$refs[name].validate((valid) => {
						if (valid) {
							this.$Message.success('Success!');
							window.location = 'login.html'
						} else {
							this.$Message.error('Fail!');
						}
					})
				},			
			}
		})
	</script>
</html>
